<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>检测列表</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./meetingIndex.css">
    <style>
        .uploadImg>.van-image__img,
        .uploadImg>.van-uploader__preview-image {
            width: 1.8667rem;
            height: 1.8667rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pageMain">
            <div class="userTip">
                <span>员工标识：{{code||'暂无'}}</span>

                <div class="btn1" @click="addBtn(0)">添加</div>
            </div>
            <div class="listBox">
                <template v-if="userList.length!=0">
                    <div class="listItem" v-for="(item,index) in userList" :key="index">
                        <div><span>名称：</span>{{item.userName}}</div>
                        <div>
                            <div>
                                <span>用前:</span>
                                <img class="imgTip" @click="checkImg(item.beforeImg,1)"
                                    :src="path + 'check1/' +item.beforeImg" v-if="item.beforeImg!=null">
                                <div class="imgTip" v-else>暂未上传</div>
                            </div>
                            <div>
                                <span>用后:</span>
                                <img class="imgTip" @click="checkImg(item.afterImg,2)"
                                    :src="path + 'check2/'+ item.afterImg" v-if="item.afterImg!=null">
                                <div class="imgTip" v-else>暂未上传</div>
                            </div>
                        </div>
                        <div>
                            <div class="infoBox">
                                <span>用前:</span>
                                <div>
                                    <div>谷丙转氨酶：{{item.figure1==''?'未上传':item.figure1}}</div>
                                    <!-- <div>谷草转氨酶：{{item.figure2==''?'未上传':item.figure2}}</div> -->
                                    <!-- <div>白蛋白：{{item.figure3==''?'未上传':item.figure3}}</div> -->
                                </div>
                            </div>
                            <div class="infoBox">
                                <span>用后:</span>
                                <div>
                                    <div>谷丙转氨酶：{{item.figure4==''?'未上传':item.figure4}}</div>
                                    <!-- <div>谷草转氨酶：{{item.figure5==''?'未上传':item.figure5}}</div> -->
                                    <!-- <div>白蛋白：{{item.figure6==''?'未上传':item.figure6}}</div> -->
                                </div>
                            </div>
                        </div>

                        <div class="btn" @click="addBtn(1,item)">完善</div>
                    </div>
                </template>
                <img src="./img/zanwuneirong.png" class="emptyBox" alt="" v-else>
            </div>
        </div>

        <!-- 上传弹窗 -->
        <van-overlay :show="showDia" :duration="0">
            <div class="showdiaBox">
                <van-icon name="cross" class="closeBtn" @click="showDia=false"></van-icon>
                <div class="titleBox">完善信息</div>

                <div class="listItem listItem1">
                    <div><span>名称：</span>
                        <input class="nameInput" type="text" v-model="form.userName" placeholder="请输入名称">
                    </div>
                    <div>
                        <span>用前:</span>
                        <img class="imgTip" @click="checkImg(form.beforeImg,1)" :src="path + 'check1/'+form.beforeImg"
                            v-if="form.beforeImg!=null&&form.beforeImg!=''">
                        <van-uploader class="uploadImg" v-model="beforeImgFileList" :after-read="beforeImgHandle"
                            :max-count="1">
                            <div class="uplader">{{form.beforeImg!=null&&form.beforeImg!=''?'替换':'上传'}}</div>
                        </van-uploader>
                    </div>
                    <div><span>谷丙转氨酶：</span>
                        <input class="nameInput" type="text" v-model="form.figure1" placeholder="请输入使用前谷丙转氨酶">
                    </div>
                    <!-- <div><span>谷草转氨酶：</span>
                        <input class="nameInput" type="text" v-model="form.figure2" placeholder="请输入使用前谷草转氨酶">
                    </div> -->
                    <!-- <div><span>白蛋白：</span>
                        <input class="nameInput" type="text" v-model="form.figure3" placeholder="请输入使用前白蛋白">
                    </div> -->

                    <div>
                        <span>用后:</span>
                        <img class="imgTip" @click="checkImg(form.afterImg,2)" :src="path + 'check2/'+form.afterImg"
                            v-if="form.afterImg!=null&&form.afterImg!=''">
                        <van-uploader class="uploadImg" v-model="afterImgFileList" :after-read="afterImgHandle"
                            :max-count="1">
                            <div class="uplader">{{form.afterImg!=null&&form.afterImg!=''?'替换':'上传'}}</div>
                        </van-uploader>
                    </div>
                    <div><span>谷丙转氨酶：</span>
                        <input class="nameInput" type="text" v-model="form.figure4" placeholder="请输入使用后谷丙转氨酶">
                    </div>
                    <!-- <div><span>谷草转氨酶：</span>
                        <input class="nameInput" type="text" v-model="form.figure5" placeholder="请输入使用后谷草转氨酶">
                    </div> -->
                    <!-- <div><span>白蛋白：</span>
                        <input class="nameInput" type="text" v-model="form.figure6" placeholder="请输入使用后白蛋白">
                    </div> -->
                </div>
                <div class="btnBox">
                    <div class="btn" @click="saveHandle">保存</div>
                </div>
            </div>
        </van-overlay>

        <div class="mask" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                // requestUrl: 'http://192.168.0.111:2033/',
                requestUrl: 'https://www.ccclkj.cn:2033/',
                mask: false,
                userList: [],
                showDia: false,
                form: {
                    checkId: '',
                    userName: '',
                    beforeImg: '',
                    afterImg: '',
                    figure1: '',
                    figure2: '',
                    figure3: '',
                    figure4: '',
                    figure5: '',
                    figure6: '',
                },
                beforeImgFileList: [],
                afterImgFileList: [],
                code: '',


            },
            created() {

                if (localStorage.meetinguserCode) {
                    this.code = localStorage.meetinguserCode
                } else {
                    this.code = this.generateRandomString(10)
                    localStorage.meetinguserCode = this.code
                }

                this.getList()
            },
            methods: {
                getList() {
                    var that = this;

                    ajax({
                        type: "post",
                        url: that.requestUrl + "client/getCheck",
                        data: {
                            openId: this.code,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                var data = res.data.reverse()
                                console.log(data);
                                that.userList = []
                                data.forEach((item => {
                                    that.userList.push({
                                        checkId: item.checkId,
                                        userName: item.userName,
                                        beforeImg: item.newPrint,
                                        afterImg: item.oldPrint,
                                        figure1: item.figure1 != 'undefined' ? item.figure1 : '',
                                        figure2: item.figure2 != 'undefined' ? item.figure2 : '',
                                        figure3: item.figure3 != 'undefined' ? item.figure3 : '',
                                        figure4: item.figure4 != 'undefined' ? item.figure4 : '',
                                        figure5: item.figure5 != 'undefined' ? item.figure5 : '',
                                        figure6: item.figure6 != 'undefined' ? item.figure6 : '',
                                    })
                                }))

                                console.log(that.userList);

                            }
                        },
                    })
                },
                addBtn(flag, obj) {
                    this.beforeImgFileList = []
                    this.afterImgFileList = []
                    if (flag == 0) {
                        this.form = {
                            userName: '',
                            beforeImg: '',
                            afterImg: ''
                        }
                    } else if (flag == 1) {
                        console.log(obj);

                        this.form = {
                            checkId: obj.checkId,
                            userName: obj.userName,
                            beforeImg: obj.beforeImg,
                            afterImg: obj.afterImg,
                            figure1: obj.figure1,
                            figure2: obj.figure2,
                            figure3: obj.figure3,
                            figure4: obj.figure4,
                            figure5: obj.figure5,
                            figure6: obj.figure6,
                        }
                        console.log(this.form);

                    }
                    this.showDia = true

                },
                saveHandle() {

                    if (this.form.userName == '') {
                        this.$toast('请输入名称');
                        return
                    }


                    console.log(this.form);

                    console.log(this.beforeImgFileList);
                    console.log(this.afterImgFileList);

                    var formData = new FormData(), _this = this;

                    formData.append("openId", this.code);
                    formData.append("userName", this.form.userName);

                    if (_this.form.checkId) {
                        formData.append("checkId", this.form.checkId);
                    }

                    if (_this.beforeImgFileList.length != 0) {
                        formData.append("file", _this.beforeImgFileList[0].file);
                    }
                    if (_this.afterImgFileList.length != 0) {
                        formData.append("file1", _this.afterImgFileList[0].file);
                    }


                    formData.append("figure1", this.form.figure1);
                    formData.append("figure2", this.form.figure2);
                    formData.append("figure3", this.form.figure3);
                    formData.append("figure4", this.form.figure4);
                    formData.append("figure5", this.form.figure5);
                    formData.append("figure6", this.form.figure6);


                    _this.mask = true

                    var timer;
                    timer = setInterval(function () {
                        clearInterval(timer);
                        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                        xhr.open("post", _this.requestUrl + "client/addAndEditCheck",
                            false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                        xhr.onload = _this.uploadComplete; //请求完成
                        xhr.onerror = _this.uploadFailed; //请求失败
                        xhr.send(formData); //开始上传，发送form数据
                    }, 1000);


                },
                //上传成功响应
                uploadComplete: function (evt) {
                    //服务断接收完文件返回的结果
                    var that = this
                    that.mask = false;
                    var data = JSON.parse(evt.target.responseText);
                    console.log(data);

                    if (data.flag) {
                        that.showDia = false
                        that.mask = false;
                        that.getList()
                        that.$toast({
                            position: 'bottom',
                            message: '保存成功'
                        });
                    } else {
                        that.$toast({
                            position: 'bottom',
                            message: '保存失败'
                        });
                    }
                },
                //上传失败
                uploadFailed: function (evt) {
                    this.mask = false;
                    plus.geolocation.clearWatch(this.wid);
                    this.$toast({
                        position: 'bottom',
                        message: '保存失败，请重试'
                    });
                },

                beforeImgHandle(file) {
                    this.form.beforeImg = null
                    console.log(this.beforeImgFileList);
                },
                afterImgHandle(file) {
                    this.form.afterImg = null
                    console.log(this.afterImgFileList);
                },
                checkImg(url, flag) {
                    url = path + `check${flag}/` + url
                    var arr = []
                    arr.push(url)
                    console.log(arr);
                    vant.ImagePreview(arr);
                },

                generateRandomString(length) {
                    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
                    let result = '';
                    for (let i = 0; i < length; i++) {
                        const randomIndex = Math.floor(Math.random() * chars.length);
                        result += chars[randomIndex];
                    }
                    return result;
                }
            }
        })



    </script>

</body>

</html>